'use strict';

function main() {
  // 获取 WebGL 上下文
  var canvas = document.querySelector('#c');
  var gl = canvas.getContext('webgl');
  if (!gl) {
    return;
  }

  // 使用我们的样板实用程序编译着色器并链接到程序中
  var program = webglUtils.createProgramFromScripts(gl, ['vertex-shader-2d', 'fragment-shader-2d']);

  // 查找顶点数据
  var positionAttributeLocation = gl.getAttribLocation(program, 'a_position');

  // 查找uniform变量位置
  var resolutionUniformLocation = gl.getUniformLocation(program, 'u_resolution');

  // 创建一个缓冲区来放置三个 2d 剪辑空间点
  var positionBuffer = gl.createBuffer();

  // 将其绑定到 ARRAY_BUFFER（将其视为 ARRAY_BUFFER =positionBuffer）
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

  var positions = [10, 20, 80, 20, 10, 30, 10, 30, 80, 20, 80, 30];
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

  //这行上面的代码是初始化代码。
  // 该行下面的代码是渲染代码。

  webglUtils.resizeCanvasToDisplaySize(gl.canvas);

  // 告诉 WebGL 如何从剪辑空间转换为像素
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

  // 清除画布
  gl.clearColor(0, 0, 0, 0);
  gl.clear(gl.COLOR_BUFFER_BIT);

  // 告诉它用我们之前写好的着色程序（一个着色器对）
  gl.useProgram(program);

  // 开启属性
  gl.enableVertexAttribArray(positionAttributeLocation);

  // 绑定位置缓冲区。
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

  // 告诉属性怎么从positionBuffer中读取数据 (ARRAY_BUFFER)
  var size = 2; // 每次迭代运行提取两个单位数据
  var type = gl.FLOAT; // 每个单位的数据类型是32位浮点型
  var normalize = false; // 不需要归一化数据
  var stride = 0; // 0 = 移动单位数量 * 每个单位占用内存（sizeof(type)）每次迭代运行运动多少内存到下一个数据开始点
  var offset = 0; // 从缓冲起始位置开始读取
  gl.vertexAttribPointer(positionAttributeLocation, size, type, normalize, stride, offset);

  // 设置 resolution变量
  gl.uniform2f(resolutionUniformLocation, gl.canvas.width, gl.canvas.height);

  // 绘制
  var primitiveType = gl.TRIANGLES;
  var offset = 0;
  var count = 6;
  gl.drawArrays(primitiveType, offset, count);
}

main();
